<template>
  <div id="result">
    <view-box>

      <x-header slot="header">投票结果</x-header>

      <tab :animate="false" :line-width="3">
        <tab-item active-class="active-1" selected @on-item-click="onItemClick">柱状图</tab-item>
        <tab-item active-class="active-2" @on-item-click="onItemClick">饼图</tab-item>
        <tab-item active-class="active-3" @on-item-click="onItemClick">列表</tab-item>
      </tab>

      <div style="padding-top:56px;">
        <!-- <v-chart ref="chartBar" :height="chartHeight" :data="chartData" v-show="show === 0">
          <v-bar />
          <v-tooltip :show-item-marker="false" />
        </v-chart> -->

        <v-chart ref="chartBar" :height="chartHeight" prevent-render @on-render="renderChart" v-show="show === 0">
        </v-chart>

        <v-chart ref="chartPie" :height="chartHeight" :data="chartData" v-show="show === 1">
          <v-scale y :options="yOptions" />
          <v-tooltip disabled />
          <v-pie :radius="0.85" series-field="name" />
          <v-legend :options="legendOptions" />
        </v-chart>

        <div v-show="show === 2">
          <group v-for="item in chartData" :key="item.num">
            <group-title>选项{{ item.num }}
              <span style="float:right;">{{ item.content }}</span>
            </group-title>
            <cell-box v-for="voter in item.voters" :key="voter.voterId">
              <avatar :account="voter.voterAccount" :username="voter.voterName" :datetime="voter.updatedAt" />
            </cell-box>
          </group>
        </div>
      </div>

    </view-box>
  </div>
</template>

<style lang='less'>
#result {
  height: 100%;
  background-color: #fbf9fe;
  .vux-flexbox .vux-flexbox-item {
    width: auto !important;
  }
  .vux-header {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
  }
  .vux-tab-container {
    width: 100%;
    position: fixed;
    left: 0;
    top: 46px;
    z-index: 1000;
  }
  .active-1 {
    color: rgb(252, 55, 140) !important;
    border-color: rgb(252, 55, 140) !important;
  }
  .active-2 {
    color: #04be02 !important;
    border-color: #04be02 !important;
  }
  .active-3 {
    color: rgb(55, 174, 252) !important;
    border-color: rgb(55, 174, 252) !important;
  }
}
</style>

<script>
import {
  CellBox,
  Group,
  GroupTitle,
  XHeader,
  ViewBox,
  Tab,
  TabItem,
  VChart,
  VTooltip,
  VLegend,
  VBar,
  VPie,
  VScale
} from "vux";
import { mapActions } from "vuex";
import Avatar from "../components/Avatar";

export default {
  name: "Result",
  props: ["voteId"],
  components: {
    CellBox,
    GroupTitle,
    Group,
    XHeader,
    ViewBox,
    Tab,
    TabItem,
    VChart,
    VTooltip,
    VLegend,
    VBar,
    VPie,
    VScale,
    Avatar
  },
  data() {
    return {
      chartHeight: 0,
      show: 0,
      map: {},
      legendOptions: {
        position: "right",
        // align: "center",
        itemFormatter(val) {
          // debugger;
          return `${val}`;
        }
      },
      yOptions: {
        formatter(val) {
          return val * 100 + "%";
        }
      }
    };
  },
  computed: {
    chartData() {
      let data = [];
      const options = this.$store.state.vote.currentVote.options;
      const results = this.$store.state.result.voteResultList;
      console.log(1);
      console.log(results);
      if (options && results) {
        data = options.map((option, index) => {
          return {
            // name: option.value,
            name: `选项${index + 1}`,
            num: index + 1,
            _id: option.key,
            count: 0,
            content: option.value,
            a: "1",
            voters: []
          };
        });
        for (let item of data) {
          for (let result of results) {
            if (result.optionId === item._id) {
              item.count++;
              item.voters.push({
                voterId: result.voterId,
                voterAccount: result.voterAccount,
                voterName: result.voterName,
                updatedAt: result.updatedAt
              });
            }
          }
        }
        for (let item of data) {
          delete item._id;
          // item.percent = (item.count / results.length).toFixed(2);
          item.percent = item.count / results.length;
          item.name += ` ${item.percent.toFixed(2) * 100 + "%"}`;
        }
      }
      return data;
    }
  },
  created() {
    this.reqGetVoteResultById({
      id: this.voteId
    });
  },
  mounted() {
    this.chartHeight = document.documentElement.clientHeight * 0.65;
  },
  methods: {
    ...mapActions(["reqGetVoteResultById"]),
    onItemClick(index) {
      console.log(index);
      this.show = index;
      switch (index) {
        case 0:
          this.$refs.chartBar.rerender();
          break;
        case 1:
          this.$refs.chartPie.rerender();
          break;
      }
    },
    renderChart({ chart }) {
      // debugger;
      chart.coord("polar", {
        transposed: true,
        endAngle: 2 * Math.PI,
        startAngle: Math.PI / 2,
        innerRadius: 0.3
      });

      chart.source(this.chartData, {
        // percent: {
        //   max: 100
        // }
      });
      chart.axis("name", {
        grid: {
          lineDash: null,
          type: "arc"
        },
        line: null,
        label: {
          fontSize: 12,
          // fontWeight: "bold",
          fill: "rgb(252, 55, 140)"
        }
      });
      chart.axis("percent", false);
      chart.tooltip(false);
      chart
        .interval()
        .position("name*percent")
        .color("rgb(252, 55, 140)");

      chart.render();
    }
  }
};
</script>
